<template>
  <el-dialog v-bind="$attrs" @close="handleClose" v-on="$listeners">
    <div>
      <el-form label-position="top" :model="form" ref="userForm" :rules="rules">
        <el-form-item :label="$t('user.username')" prop="username">
          <el-input
            :disabled="usernameDisabled"
            maxlength="64"
            show-word-limit
            v-model="form.username"
            @blur="() => (form.username = form.username.trim())"
            :placeholder="$t('user.username')"
          ></el-input>
        </el-form-item>

        <el-form-item :label="$t('user.contact_name')" prop="name">
          <el-input
            maxlength="32"
            show-word-limit
            v-model="form.name"
            @blur="() => (form.name = form.name.trim())"
            :placeholder="$t('user.contact_name')"
          ></el-input>
        </el-form-item>
        <el-form-item :label="$t('user.phone')" prop="mobile">
          <el-input
            maxlength="16"
            show-word-limit
            v-model="form.mobile"
            @blur="() => (form.mobile = form.mobile.trim())"
            :placeholder="$t('user.phone')"
          ></el-input>
        </el-form-item>
        <el-form-item :label="$t('user.country_or_region')" prop="countryCode">
          <el-select
            v-model="form.countryCode"
            filterable
            :placeholder="$t('user.country_or_region')"
            style="width: 100%"
          >
            <el-option
              v-for="item in countryData"
              :key="item.countryCode3"
              :label="$t('country_or_region.' + item.countryCode3)"
              :value="item.countryCode3"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item v-if="this.form.userId" :label="$t('user.status')" prop="status">
          <el-radio v-model="form.status" :label="1">{{ $t("user.unlocked") }}</el-radio>
          <el-radio v-model="form.status" :label="0">{{ $t("user.locked") }}</el-radio>
        </el-form-item>
        <el-form-item :label="$t('role.role_label')" prop="roleIds">
          <el-checkbox-group
            v-if="roleData && roleData.length > 0"
            v-model="form.roleIds"
          >
            <el-checkbox
              v-for="role in roleData"
              :key="role.roleId"
              :label="role.roleId"
              >{{ role.roleName }}</el-checkbox
            >
          </el-checkbox-group>
          <div style="color: red" v-if="!roleData || roleData.length == 0">
            {{ $t("role.role_create_tip") }}
          </div>
        </el-form-item>
      </el-form>
    </div>
    <template #footer>
      <span class="dialog-footer">
        <el-button text @click="handleClose">{{ $t("common.cancel") }}</el-button>
        <el-button type="primary" :loading="confirmLoading" @click="saveUser()">{{
          $t("common.confirm")
        }}</el-button>
      </span></template
    >
  </el-dialog>
</template>

<script>
import { mapGetters } from "vuex";
import { addUser, editUser, getUser } from "@/api/user";
import { listRole } from "@/api/role";
import { checkPhoneNum } from "@/utils/validate";
import countryJson from "@/assets/static/country.json";

export default {
  inheritAttrs: false,
  data() {
    return {
      countryData: countryJson,
      confirmLoading: false,
      usernameDisabled: false,
      roleData: [],
      orgId: null,
      form: {
        userId: "",
        queryOrg: {},
        createType: 0,
        orgId: null,
        username: "",
        name: "",
        email: null,
        mobile: "",
        countryCode: "",
        status: 1,
        roleList: [],
        roleIds: [],
      },
      rules: {
        queryOrg: [
          {
            required: true,
            message: this.$t("common.nullInputTip"),
            trigger: "blur",
          },
        ],
        username: [
          {
            required: true,
            message: this.$t("common.nullInputTip"),
            trigger: "blur",
          },
          {
            type: "email",
            message: this.$t("user.email_format_error"),
            trigger: "blur",
          },
        ],
        name: [
          {
            required: true,
            message: this.$t("common.nullInputTip"),
            trigger: "blur",
          },
        ],
        email: [
          {
            required: true,
            message: this.$t("common.nullInputTip"),
            trigger: "blur",
          },
          {
            type: "email",
            message: this.$t("common.nullInputTip"),
            trigger: "blur",
          },
        ],
        mobile: [
          {
            validator: checkPhoneNum,
            trigger: "blur",
          },
        ],
        countryCode: [
          {
            required: true,
            message: this.$t("common.nullInputTip"),
            trigger: "blur",
          },
        ],
        status: [
          {
            required: true,
            message: this.$t("common.nullInputTip"),
            trigger: "blur",
          },
        ],
        roleIds: [
          {
            required: true,
            message: this.$t("user.select_role_tip"),
            trigger: "blur",
          },
        ],
      },
    };
  },
  computed: {
    ...mapGetters(["countries"]),
  },
  methods: {
    init(id) {
      this.form.userId = id;
      this.form.roleIds = [];
      if (id) {
        this.usernameDisabled = true;
        this.getEditUserInfo(this.form.userId);
      } else {
        this.usernameDisabled = false;
      }
      this.getAllRoles();
    },
    handleClose() {
      /* this.$nextTick(() => {
        this.$refs.organizationTree.reset()
      }) */
      this.$refs["userForm"].resetFields();
      this.form.queryOrg = {};
      this.orgId = "";
      this.$emit("update:model-value", false);
    },
    saveUser() {
      this.$refs["userForm"].validate((valid) => {
        if (valid) {
          if (this.form.roleIds.length > 5) {
            console.log(this.form.roleIds);
            this.$message.error(this.$t("user.max_role_error"));
            return;
          }
          this.confirmLoading = true;
          // role info
          this.form.roleList = [];
          this.form.roleIds.forEach((roleId) => {
            this.form.roleList.push({ roleId: roleId });
          });
          this.form.platCode = ["PASS"];
          if (this.form.userId) {
            editUser(this.form)
              .then(() => {
                this.confirmLoading = false;
                this.$message({
                  message: this.$t("common.success"),
                  type: "success",
                });
                this.$emit("submit");
                this.handleClose();
              })
              .catch((e) => {
                this.confirmLoading = false;
                this.$confirmError(e);
              });
          } else {
            this.form.orgId = Number.parseInt(this.$store.getters.orgId);
            this.form.email = this.form.username;
            this.form.contactName = this.form.name;
            addUser(this.form)
              .then(() => {
                this.confirmLoading = false;
                this.$message({
                  message: this.$t("common.success"),
                  type: "success",
                });
                this.$emit("submit");
                this.handleClose();
              })
              .catch((e) => {
                this.$confirmError(e);
                this.confirmLoading = false;
              });
          }
        } else {
          return false;
        }
      });
    },
    getEditUserInfo(userId) {
      getUser(userId)
        .then((res) => {
          this.form.username = res.username;
          this.form.orgId = res.orgId;
          this.form.name = res.name;
          this.form.email = res.email;
          this.form.mobile = res.mobile;
          this.form.countryCode = res.countryCode;
          this.form.status = res.status;
          console.log(res.roleList);
          if (res.roleList) {
            res.roleList.forEach((role) => {
              this.form.roleIds.push(role.roleId);
            });
          }
          console.log(this.form.roleIds);
          /* this.$nextTick(() => {
          this.$refs.organizationTree.initData()
        }) */
        })
        .catch(this.$confirmError);
    },
    getAllRoles() {
      listRole({ platCode: "PASS" })
        .then((res) => {
          this.roleData = res;
        })
        .catch(this.$confirmError);
    },
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
::v-deep .el-checkbox__label {
  vertical-align: middle;
  white-space: pre-line;
}
</style>
